<template>
  <view class="page">
    <wd-navbar
      title="我的下载"
      fixed
      placeholder
      left-arrow
      safeAreaInsetTop
      custom-class="nav"
      :bordered="false"
      @click-left="handleClickLeft"
    ></wd-navbar>
    <view class="wallpaper_list">
      <view class="wallpaper_item" v-for="item in state.list" :key="item.url">
        <view class="fall-video" v-if="item.association != 'null' && item.association">
          <wd-icon color="#fff" name="play-circle-filled" size="22px"></wd-icon>
        </view>
        <image
          @click="
            toRouter(
              '/pages/preview/index',
              `name=${item.name}&url=${item.url}&category=${item.category}&association=${item.association}&id=${item.id}`
            )
          "
          style="width: 100%"
          mode="widthFix"
          :src="item.url"
        ></image>
        <view class="mask_info_box">
          <text>{{ item.name }}</text>
          <wd-img
            @click="handleDel(item.id)"
            width="15"
            height="15"
            src="/static/assets/my/del.png"
          ></wd-img>
        </view>
      </view>
    </view>
    <view v-if="state.list.length == 0">
      <wd-status-tip image="content" tip="暂无内容" />
    </view>
  </view>
</template>

<script setup>
import { toRouter } from "@/hooks/utils";
import { reactive, onMounted } from 'vue';
const state = reactive({
	list: []
})
const handleClickLeft = function handleClickLeft() {
  uni.navigateBack()
}
const initList = ()=> {
	uni.request({
		url: '/api/wallpaper/download/list?username=' + uni.getStorageSync('wpa_username'),
	}).then(res=>{
    if( res.data.status != 404 ){
		  state.list = res.data
    }
	})
}
onMounted(()=>{
	initList()
})
const handleDel = (id)=> {
	uni.showModal({
		title: '提示',
		content: '确定删除该壁纸吗？',
		success: (res) => {
			if (res.confirm) {
				uni.request({
					url: '/api/wallpaper/download/delete?id=' + id,
					method: 'POST',
					data: {
						id: id
					}
				}).then(res => {
					if (res.data.id) {
						uni.showToast({
							title: '删除成功',
							icon:'success',
							duration: 2000
						})
						initList()
					} else {
						uni.showToast({
							title: '删除失败',
							icon: 'none',
							duration: 2000
						})
					}
				})
			}
		}
	})	
}
</script>

<style lang="scss" scoped>
:deep(.nav) {
  background: rgb(245, 245, 245)
    url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top
    left/100% auto;
}
.page {
  position: relative;
  &:before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgb(245, 245, 245)
      url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat
      top left/100%;
    z-index: -1;
  }
}
.wallpaper_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  padding: 40rpx;
  .wallpaper_item {
    position: relative;
    overflow: hidden;
    font-size: 0;
    border-radius: 12px;
    .mask_info_box {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      padding: 20rpx;
      box-sizing: border-box;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
.fall-video{
  position: absolute;
  z-index: 99;
  top: 5px;
  right: 5px;
}
</style>
